﻿<div>

    <h2>JavaScript 代码：</h2>
    <textarea name="dp-syntaxhighlighter" class="brush: js; highlight: []">

            $(function () {
                var tg = $("#t1").treegrid({
                    title: 'test treegrid',
                    width: 900,
                    height: 400,
                    method: "get",
                    idField: 'id',
                    treeField: 'name',
                    remoteSort: false,
                    frozenColumns: [[
                        { field: 'ck', checkbox: true },
                        { field: 'id', title: 'ID(id)', width: 80, sortable: true }
                    ]],
                    columns: [[
                        { field: 'name', title: '名称(name)', width: 180, sortable: true },
                        { field: 'age', title: '年龄(age)', width: 120, sortable: true }
                    ]],
                    enableHeaderClickMenu: true,
                    enableHeaderContextMenu: true,
                    enableRowContextMenu: true
                });

                $("#Button1").click(function () {
                    tg.treegrid("append", { data: [{ id: 2, name: "测试节点B", age: 222 }] });
                });

                $("#Button2").click(function () {
                    var b = tg.treegrid("pop", 2);
                    tg.treegrid("append", { data: [{ id: 1, name: "测试节点A", age: 111, children: [b] }] });
                });
            });

    </textarea>
    <h2>HTML 代码：</h2>
    <textarea name="dp-syntaxhighlighter" class="brush: html; highlight: []">

        <input id="Button1" type="button" value="添加一个节点" />
        <input id="Button2" type="button" value="添加另一节点" />

        <hr />
        <table id="t1"></table>

    </textarea>


</div>